<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>FusionCharts XT : Pie/Doughnut Chart Special API - togglePieSlice</title>
       <script type="text/javascript" src="../js/FusionCharts.js"></script>
		<script type="text/javascript" language="Javascript" src="../js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" language="Javascript" src="../js//lib.js"></script>

        <link href="../Code/assets/ui/css/style.css" rel="stylesheet" type="text/css" />

        <!--[if IE 6]>
        <script type="text/javascript" src="../../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script>
          /* select the element name, css selector, background etc */
          DD_belatedPNG.fix('img');

          /* string argument can be any CSS selector */
        </script>
        <![endif]-->

        <style type="text/css">
            h2.headline {
                font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
                padding: 0;
                margin: 25px 0 25px 0;
                color: #7d7c8b;
                text-align: center;
            }
            p.small {
                font: normal 68.75%/150% Verdana, Geneva, sans-serif;
                color: #919191;
                padding: 0;
                margin: 0 auto;
                width: 664px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <!-- wrapper -->

        <div id="wrapper">
            <!-- header -->
            <div id="header"> 
                <div class="logo">
                    <a class="imagelink"  href="http://www.fusioncharts.com/" target="_blank">
                        <img src="../Code/assets/ui/images/fusionchartsv3.2-logo.png" width="131" height="75" alt="FusionCharts XT logo" />
                    </a>
                </div>
				<h1 class="brand-name">FusionCharts XT</h1>

                <h1 class="logo-text">Pie/Doughnut Chart Special API - togglePieSlice</h1>
                
            </div>
            <!-- content area -->
            <div class="content-area">
                <div id="content-area-inner-main">
                    <p class="text" align="center">Select a chart, enter the index of the chart slice to toggle and click Toggle button</p>
					<div id="messageBox" style="margin-left:100px; margin-right:100px; display:none;"></div>
					<p>&nbsp;</p>

                    <div class="clear"></div>
                    <div class="gen-chart-render">

                        <div class="expandable-panel" style="margin-left:170px; margin-bottom:15px;">
                            <div>
                                <div class="selection-panel"  style="width:500px; text-align:center;padding-left:0px; padding-top:8px; ">
                        		Select a chart type:
                                    <select id="chartType" onchange="renderChart()">
                                        <option value="Pie3D.swf" selected="selected">Pie 3D</option>

                                        <option value="Pie2D.swf">Pie 2D</option>
                                        <option value="Doughnut3D.swf">Doughnut 3D</option>
                                        <option value="Doughnut2D.swf">Doughnut 2D</option>
                                    </select>
                                </div>
                            </div>
                            <span></span>

                        </div>
                        <center>
                            <div id="chartContainer">FusionCharts will load here</div>

                            <p class="generic-text-area" style="margin-top:15px;">
                                <input type="text" id="index" size="5" value="0"/>
                                <input type="button" value="Toggle" onclick="sliceChart()"/>
                            </p>
                        </center>

                        <script type="text/javascript"><!--
                            function sliceChart (slice) {
                                slice = document.getElementById('index').value ;
                                FusionCharts("myChartId").togglePieSlice(slice);
                            }

                            // render the chart as pe the selected chart type
                            function renderChart()
                            {
                                // get chart type from combo box
                                var swfUrl = document.getElementById("chartType").options[document.getElementById("chartType").selectedIndex].value;
										  
								if(FusionCharts("myChartId")) FusionCharts("myChartId").dispose();
										  
                                var myChart = new FusionCharts("../swf/"+ swfUrl, "myChartId", "420", "300", "0", "1");
                                myChart.setXMLData('<chart caption="Weekly Sales Summary" showLegend="1" legendPosition="RIGHT" showLabels="0"\n\
								   xAxisName="Week" yAxisName="Sales" numberPrefix="$">\n\
									  <set label="Week 1" value="14400" />\n\
									  <set label="Week 2" value="19600" />\n\
									  <set label="Week 3" value="24000" />\n\
									  <set label="Week 4" value="15700" />\n\
								</chart>');
								
                                myChart.render("chartContainer");

                                // reset index text box
                                document.getElementById('index').value = 0;

                            }

                            renderChart();

                            // --></script>


                    </div>
                    <br/>

                    <div class="clear"></div>

                    <p>&nbsp;</p>
                    <p class="small">&nbsp;</p>

                    <p>&nbsp;</p>
                    <div class="underline-dull"></div>    </div>

                
            </div>

            <!-- footer -->
            <div id="footer">
                <ul>
                    <li><a href="../index.html"><span>&laquo; Back to list of examples</span></a></li>

                    <li class="pipe">|</li>
                    <li><a href="../../NoChart.html"><span>Unable to see the chart above?</span></a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript"><!--//
			$(document).ready ( function() {
			   showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript chart is rendered instead", isJSRenderer(FusionCharts("myChartId")) );
			});	
		// -->
		</script>  
    </body>
    

</html>

